figure.Sedimentation = new Class({
    Extends: figure.DomFigure,

    initialize: function(id, css) {
        this.parent(id);
        this.createElement('canvas', {
            id: id,
            Width: 100,
            Height: 100,
            css: css
        });
        this.element = this.getElement();
        this.writeTag(css.top + figure.sedimentSizes.HEIGHT - 50, css.left - figure.sedimentSizes.WIDTH / 2 +15)
    },

    draw: function() {
        var ctx = this.element[0].getContext('2d');
        var x = 0;
        var y = 0;
        var width = figure.sedimentSizes.WIDTH;
        var radius = 15;
        var height = figure.sedimentSizes.HEIGHT;
        ctx.beginPath();
        ctx.fillStyle = this._createGradient(ctx);
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        ctx.lineTo(x + radius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.rect(x, height/2, width, 3);
        ctx.stroke();
        ctx.restore();
    },

    _createGradient: function(context) {
        var grd = context.createLinearGradient(10,2,65,10);
        grd.addColorStop(0,"white");
        grd.addColorStop(1, figure.sedimentationColor);
        return grd;
    }

});